<template>
	<view class="goodsDetailOuter">
		<view class="goodsDetail_top" :style="`background-color: rgba(255, 255, 255, ${topOpacity})`">
			<image src="../../static/images/iconImg/zjt.png" @click="backHome"></image>
			<view class="title" v-if="isTitle">
				商品详情
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="swiperOuter">
			<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(ele,index) in goodsDetailData.album" :key="index">
					<view class="swiper-item">
						<image :src="ele" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品信息 -->
		<view class="goodsInfo">
			<view class="goodsInfo_t">
				<view class="goodsInfo_t_l">
					<text>
						￥{{goodsDetailData.price}}
					</text>
					<text>
						￥{{goodsDetailData.price}}
					</text>
				</view>
				<view class="goodsInfo_t_r">
					{{goodsDetailData.buy_count}}人已购买
				</view>
			</view>
			<view class="goodsInfo_main">
				<view class="goodsInfo_main_l">
					<p>{{goodsDetailData.name}}</p>
					<p>{{goodsDetailData.brief}}</p>
				</view>
				<view class="goodsInfo_main_r">
					<image src="../../static/images/iconImg/fenxiang.png" mode=""></image>
				</view>
			</view>

		</view>

		<!-- 规格 -->
		<view class="specification">
			规格 <text>{{goodsDetailData.product.spes_desc}}</text>
		</view>

		<!-- 说明 -->
		<view class="description">
			<view class="description_l">
				说明
			</view>
			<view class="description_r">
				<view class="description_r_t">
					<image src="../../static/images/iconImg/duihao.png" mode=""></image>
					<text>24小时内发货</text>
				</view>
				<view class="description_r_b">
					<image src="../../static/images/iconImg/duihao.png" mode=""></image>
					<text>7天无理由退款</text>
				</view>
			</view>
		</view>

		<view class="line"></view>

		<!-- 详情 -->
		<view class="particularOuter">
			<ul class="particular">
				<li v-for="(item,index) in acticeNavData" :class="activeFlag===item.id?'active':''" @click="navBtn(item.id)">
					{{item.title}}
				</li>
			</ul>
			<view class="particular_content" v-html="detailData"></view>
		</view>

		<!-- 底部导航 -->
		<view class="bottomNav">
			<ul class="gnList">
				<li v-for="item in gnListData" @click="bnListBtn(item)">
					<image :src="item.iconUrl" mode=""></image>
					<p>{{item.title}}</p>
				</li>
				<view class="numPop">
					{{shopCarNum}}
				</view>
			</ul>

			<view class="joinCar" @click="joinCar">
				加入购物车
			</view>

			<view class="buy" @click="buy">
				立即购买
			</view>

		</view>

		<!-- 加入购物车弹框 -->
		<view v-if="popFlag" class="joinCarPopup" @click="joinCarPopup">
			<view class="joinCarPop" @click.stop="">
				<view class="joinCarPop_top">
					<image :src="goodsDetailData.image_url" mode=""></image>
					<view class="joinCarPop_top_js">
						<p>{{goodsDetailData.product.name.substring(0,18)}}...</p>
						<p>￥<span>{{goodsDetailData.price}}</span></p>
						<p>库存{{goodsDetailData.stock}}</p>
					</view>
				</view>
				<!-- 颜色与规格 -->
				<view class="joinCarPop_ys">
					<view class="joinCarPop_ys_item1">
						<p>颜色</p>
						<view class="joinCarPop_ys_item1_dx">
							<span>红色</span>
							<span>灰色</span>
						</view>
					</view>
					<view class="joinCarPop_ys_item1">
						<p>规格</p>
						<view class="joinCarPop_ys_item1_dx">
							<span>规格1</span>
							<span>规格2</span>
						</view>
					</view>
				</view>

				<!-- 数量 -->
				<view class="shopNumber">
					<p>数量</p>
					<span class="jian" @click="jian">-</span>
					<span class="num">{{num}}</span>
					<span class="jia" @click="jia">+</span>
				</view>

				<!-- 确定按钮 -->
				<view class="popConfirm" @click="joinShopCarConfirm">
					确定
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import {
		getGoodsDetailApi,
		collectionApi,
	} from '../../api/paiModule/home.js'
	export default {
		data() {
			return {
				goodsId: '1',
				token: '',
				goodsDetailData: {},
				isTitle: false,
				topOpacity: 0,
				activeFlag: '0',
				acticeNavData: [{
					id: '0',
					title: '图文详情'
				}, {
					id: '1',
					title: '商品参数'
				}, {
					id: '2',
					title: '卖家评论'
				}, ],
				detailData: '123',
				gnListData: [{
						id: '0',
						title: '客服',
						iconUrl: '../../static/images/iconImg/kf.png'
					},
					{
						id: '1',
						title: '购物车',
						iconUrl: '../../static/images/iconImg/gwc.png'
					},
					{
						id: '2',
						title: '收藏',
						iconUrl: '../../static/images/iconImg/jsc.png',
					},
				],
				popFlag: false,
				shopCarNum: '0',
				joinOrbuy: false,
				num: 1,
				ids: 0
			}
		},
		onLoad(option) {
			this.goodsId = option.id
		},
		created() {
			const token = uni.getStorageSync('token')
			this.token = token
		},
		onShow() {
			this.getGoodsDetail()
			this.getshopCarNum()
			if (this.goodsDetailData.isfav === 'true') {
				this.gnListData[2].iconUrl = '../../static/images/iconImg/jscz.png'
			} else {
				this.gnListData[2].iconUrl = '../../static/images/iconImg/jsc.png'
			}
		},
		methods: {
			// 获取商品详情
			async getGoodsDetail() {
				const {
					data: res
				} = await getGoodsDetailApi({
					id: parseInt(this.goodsId),
					method: "goods.getdetial",
					token: uni.getStorageSync('token')
				})
				console.log(res);
				this.goodsDetailData = res.data
				this.detailData = res.data.intro
				if (res.data.isfav === 'true') {
					this.gnListData[2].iconUrl = '../../static/images/iconImg/jscz.png'
				} else {
					this.gnListData[2].iconUrl = '../../static/images/iconImg/jsc.png'
				}
			},

			// 获取购物车数量
			async getshopCarNum() {
				const {
					data: res
				} = await getGoodsDetailApi({
					method: "cart.getnumber",
					token: uni.getStorageSync('token')
				})
				if (res.status) {
					this.shopCarNum = res.data
				}
			},

			// 返回主页
			backHome() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},

			// 详情导航
			navBtn(id) {
				this.activeFlag = id
				switch (id) {
					case '0':
						this.detailData = this.goodsDetailData.intro
						break;
					case '1':
						this.detailData = '<image class="dengdai" src="../../static/images/dengdai.png" mode=""></image>'
						break;
					case '2':
						this.detailData = '<image class="dengdai" src="../../static/images/dengdai.png" mode=""></image>'
						break;
				}
			},

			// 详情底部功能列表
			async bnListBtn(data) {
				switch (data.title) {
					case '客服':
						console.log('客服')
						break;
					case '购物车':
						uni.switchTab({
							url: '/pages/shopCard/shopCard'
						})
						break;
					case '收藏':
						collectionApi({
							goods_id: parseInt(this.goodsId),
							method: "user.goodscollection",
							token: uni.getStorageSync('token')
						}).then(res => {
							this.getGoodsDetail()
						}).catch(err => {
							console.log(err);
						})
						break;
				}
			},

			// 数量加
			jia() {
				this.num += 1
			},

			// 数量减
			jian() {
				if (this.num !== 1) {
					this.num -= 1
				}
			},

			// 加入购物车
			async joinCar() {
				this.popFlag = true
			},

			// 购买
			buy() {
				this.joinOrbuy = true
				this.popFlag = true
				console.log(this.goodsDetailData);
			},

			// 加入购物车弹窗
			joinCarPopup() {
				this.popFlag = false
				this.joinOrbuy = false
			},

			// 弹窗确定
			async joinShopCarConfirm() {

				if (this.joinOrbuy === false) {
					const {
						data: res
					} = await getGoodsDetailApi({
						method: "cart.add",
						nums: 1,
						product_id: this.goodsDetailData.product.id,
						token: "10d5d70e46512d90e3eef705a579d9d6"
					})

					uni.showToast({
						title: '添加购物车成功!',
						icon: 'success', //将值设置为 success 或者 ''
						duration: 1000
					})

					this.popFlag = false

					this.getshopCarNum()
				} else {
					const {
						data: res
					} = await getGoodsDetailApi({
						method: "cart.add",
						nums: 1,
						product_id: this.goodsDetailData.product.id,
						token: uni.getStorageSync('token')
					})

					this.ids = res.data

					uni.navigateTo({
						url: `/pages/purchase/purchase?ids=${this.ids}&num=${this.num}`
					})

					this.popFlag = false
				}

			},

		},

		// 滚轮事件
		onPageScroll(e) {
			if (e.scrollTop >= 68 && e.scrollTop <= 136) {
				this.topOpacity = 0.5
			} else if (e.scrollTop >= 136) {
				this.topOpacity = 1
				this.isTitle = true
			} else {
				this.topOpacity = 0
				this.isTitle = false
			}
		},


	}
</script>

<style lang="scss" scoped>
	.goodsDetailOuter {

		.goodsDetail_top {
			height: 40px;
			width: 100%;
			display: flex;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 9;

			image {
				width: 30px;
				height: 26px;
			}

			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}

		.swiperOuter {
			height: 55vh;

			.swiper {
				height: 55vh;

				.swiper-item {
					height: 55vh;
					line-height: 55vh;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.goodsInfo {
			.goodsInfo_t {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 20px 10px 10px;

				.goodsInfo_t_l {
					font-size: 20px;
					color: #ff5500;

					text {
						&:last-child {
							color: #7a7a7a;
							font-size: 14px;
							text-decoration: line-through;
						}
					}
				}

				.goodsInfo_t_r {
					color: #686868;
					font-size: 12px;
				}
			}

			.goodsInfo_main {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dddddd;
				padding-bottom: 10px;

				.goodsInfo_main_l {
					width: 80%;
					padding-left: 10px;
					font-size: 12px;

					p {
						&:last-child {
							margin-top: 3px;
							color: #686868;
						}
					}
				}

				.goodsInfo_main_r {
					width: 26px;
					height: 26px;
					margin-left: 6%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

		}

		.specification {
			font-size: 13px;
			padding: 10px 10px;
			color: #686868;
			border-bottom: 1px solid #e6e6e6;

			text {
				margin-left: 20px;
				color: #000;
			}
		}

		.description {
			display: flex;
			align-items: center;
			padding: 10px 0 10px 10px;
			font-size: 14px;
			border-bottom: 1px solid #e3e3e3;

			.description_r {
				font-size: 12px;
				margin-left: 14px;

				image {
					width: 12px;
					height: 12px;
					margin-right: 4px;
				}
			}
		}

		.line {
			height: 12px;
			background-color: #eeeeee;
		}

		.particularOuter {
			.particular {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				li {
					width: 32%;
					text-align: center;
					border-bottom: 2px solid #fff;
					padding: 10px 0 6px 0;
					margin-bottom: 10px;
				}

				.active {
					border-bottom: 2px solid #000;
				}
			}

			.dengdai {
				width: 100%;
				height: 100%;
				margin-bottom: 100px;
			}

		}

		.bottomNav {
			height: 46px;
			background-color: #fff;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			padding: 0;

			.gnList {
				height: 100%;
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 10px;
				padding-top: 2px;

				li {
					font-size: 12px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						height: 18px;
						width: 18px;
						margin-bottom: 3px;
					}
				}
			}

			.joinCar {
				height: 40px;
				width: 30%;
				background-color: #d9d9d9;
				font-size: 12px;
				text-align: center;
				line-height: 40px;
			}

			.buy {
				height: 40px;
				width: 30%;
				color: #fff;
				background-color: #333333;
				text-align: center;
				font-size: 12px;
				line-height: 40px;
			}

		}

		.joinCarPopup {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(0, 0, 0, .4);
			z-index: 3;

			.joinCarPop {
				height: 300px;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 4;
				background-color: #fff;

				.joinCarPop_top {
					display: flex;
					align-items: flex-end;
					position: relative;
					border-bottom: 1px solid #dddddd;
					padding: 10px 0 10px 10px;

					image {
						width: 70px;
						height: 80px;
						position: absolute;
						top: -10px;
					}

					.joinCarPop_top_js {
						margin-left: 80px;
						font-size: 12px;

						p {
							&:nth-child(1) {
								color: #000;
							}

							&:nth-child(2) {
								color: #ff0000;
								margin: 4px 0;

								span {
									display: inline-block;
									margin-left: 10px;
								}
							}

							&:nth-child(3) {
								color: #8a8a8a;
								font-size: 12px;
							}
						}
					}
				}

				.joinCarPop_ys {
					font-size: 13px;

					.joinCarPop_ys_item1 {
						padding: 10px;
						border-bottom: 1px solid #dddddd;

						p {
							margin-bottom: 4px;
						}

						span {
							display: inline-block;
							border: 1px solid #d9d9d9;
							font-size: 12px;

							&:first-child {
								background-color: #000;
								color: #fff;
								padding: 6px;
								margin-right: 6px;
							}

							&:last-child {
								background-color: #fff;
								color: #000;
								padding: 6px;
							}
						}
					}
				}

				.shopNumber {
					display: flex;
					align-items: center;
					padding: 10px;

					p {
						margin-right: 10px;
					}

					.num {
						margin: 0 6px;
					}
				}

				.popConfirm {
					width: 100%;
					background-color: #333333;
					color: #fff;
					position: absolute;
					bottom: 0;
					text-align: center;
					font-size: 14px;
					padding: 10px 0;
				}

			}
		}

		.numPop {
			font-size: 12px;
			background-color: #f55151;
			padding: 0px 3px;
			color: #e8e8e8;
			border-radius: 20px;
			transform: scale(0.8);
			position: absolute;
			left: 20%;
			top: 0;
		}


	}
</style>